<template>
  <div class="Map">
    <van-nav-bar
      title="地图找房"
      left-text=""
      left-arrow
      @click-left="$router.back()"
    />

    <baidu-map
      id="allmap"
      @ready="mapReady"
      :scroll-wheel-zoom="true"
      :mapStyle="mapStyle"
    >
    </baidu-map>
  </div>
</template>
<!--引入百度地图api-->

<script
  type="text/javascript"
  src="https://api.map.baidu.com/api?v=2.0&ak=Psb9As2If2wmNQ3ISWtnPG1Sutaiv0IG"
></script>

<script>
export default {
  name: 'Map',
  data() {
    return {
      point: '', //自定义样式
      mapStyle: {
        styleJson: [
          {
            featureType: 'water',
            elementType: 'geometry',
            stylers: { color: '#20ab6a' }
          }
        ]
      }
    }
  },

  created() {},

  methods: {
    mapReady({ BMap, map }) {
      //选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13)
      map.centerAndZoom(this.point, 12)
    }
  }
}
</script>

<style scoped lang="less">
.Map {
  /deep/.van-nav-bar {
    background-color: #21b97a;
    .van-nav-bar__title {
      font-size: 18px;
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
    .iconFont {
      color: #fff;
      font-size: 18px;
    }
  }
  /* 设定地图的大小 */
  /* 设定地图的大小 */
  #allmap {
    height: 620px;
    width: 375px;
    margin: 0 auto;
  }
}
</style>
